<template>
  <div class="side-bar">
    <traffic-light></traffic-light>
    <div class="logo"></div>
    <div class="left-bar">
      <div class="nav-link" v-for="item in navigations" :key="item.path" @click="navigationTo(item)"
           :class="item.label===selectItem ?'activehome':null">
        <div class="nav-button" :style="{backgroundImage:`url(${item.imgUrl})`}"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type {NavItem} from "@/api/types";
import {NavItems} from "@/config/data";
import {onMounted, ref} from "vue";
import router from "@/router";
import TrafficLight from "@/components/traffic-light.vue"

const selectItem = ref('home')

const navigations: Array<NavItem> = NavItems



const navigationTo = (item: NavItem) => {
  selectItem.value = item.path
  router.push({name: item.label})
}
</script>

<style lang="less" scoped>


.side-bar {
  width: 100px;
  background:  rgba(0, 0, 0, 0.5);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.logo {
  width: 100px;
  height: 80px;
  background: url(@/assets/icons/logo.png) no-repeat center;
  background-size: 60px 68.5px;
}

.left-bar {
  width: 100px;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.nav-link {
  width: 50px;
  height: 50px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-link:hover {
  cursor: pointer;
}


.nav-button {
  width: 48px;
  height: 48px;
  background-size: 48px 48px;
  background-repeat: no-repeat;

}

.activehome {
  border-radius: 50%;
  background-image: linear-gradient(to top, #0250c5 0%, #d43f8d 100%);
  backdrop-filter: blur(2px);
  width: 60px;
  height: 60px;
}

</style>